<style type="text/css">
#status {
width: 380px;
margin: auto;
}
		
span.topoRedondo, span.baseRedondo {
    display:block; /* deixando o display dos span como block, já que o padrão é inline e é necessário para visualização correta */
    background: transparent; /* deixando o background tranparente para que sempre que mudarmos a cor de fundo do <body> por exemplo, não seja necessário a mudança aqui. */
}

span.topoRedondo span, span.baseRedondo span {
    display: block; /* deixando o display dos span como block, já que o padrão é inline e é necessário para visualização correta */
    height: 1px; /* declarando a altura dos spans para 1px */
    overflow: hidden; /* ocultando todo o conteúdo que poderia ser visualizado no span. Todo espaço é reduzido. Sem isso, no i.e. não é visualizado corretamente. */
    background: #FFFF99; /* definindo a cor de fundo dos spans para verde. Sempre que quiser mudar a cor, essa é a parte que deverá ser alterada. */
}

span.rum { margin:0 5px; } /* Definindo a margem para 5px para as laterais e 0 para base e topo para o primeiro span */
span.rdois { margin:0 3px; } /* Definindo a margem para 3px para as laterais e 0 para base e topo para o segundo span */
span.rtres { margin:0 2px; } /* Definindo a margem para 2px para as laterais e 0 para base e topo para o terceiro span */
span.rquatro { margin: 0 1px; height: 2px; } /* Definindo a margem para 1px para as laterais e 0 para base e topo para o quarto span e definido a altura para ele de 2px, a única altura diferente dos demais.*/

.meioRedondo {
    background: #FFFF99; /* definindo a cor de fundo dos spans para verde. Sempre que quiser mudar a cor, essa é a parte que deverá ser alterada. (Sempre deixar a mesma cor dos spans acima) */
    color: #000; /* definido a cor preta para o texto */
    margin: 0; /* zerando a margem */
    padding: 2px 5px; /* definindo padding de 5px para a base e o topo e 15px para as laterais, para que o conteúdo não fique colado nas bordas. */
    line-height: 110%;
    text-align: center;
    display:hidden;
}
</style>
	<div id="status">
		<span class="topoRedondo">
			<span class="rum"></span>
			<span class="rdois"></span>
			<span class="rtres"></span>
			<span class="rquatro"></span>
		</span>

		<div class="meioRedondo"><%= @msg_status%></div>
		<span class="baseRedondo">
			<span class="rquatro"></span>
			<span class="rtres"></span>
			<span class="rdois"></span>
			<span class="rum"></span>
		</span>
	</div>
<script language="javascript">
<!--
new Effect.Pulsate($('status'), {pulses: 2});
-->
</script>
